<template>
  <view class="home bg flex column">
    <u-navbar :is-back="false" :background="null" :title-bold="true" title="预警/报警" back-icon-color="#fff"
      title-color="#fff">
      <view slot="right" class="navbar-right">
        <image src="/static/image/screen.svg" @click="clickBtn" class="navbar-right--icon" />
      </view>
    </u-navbar>
    <view>
      <u-tabs-swiper ref="uTabs" bg-color="transparent" inactive-color="#999999" :list="list" :current="current"
        @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
    </view>
    <swiper class="item one" :current="swiperCurrent" @transition="transition" style="height: 100%;"
      @animationfinish="animationfinish">
      <swiper-item class="swiper-item">
        <earlyWarning v-if="swiperCurrent === 0" :form="form" :nameList="nameList" style="width: 100%; height:100%">
        </earlyWarning>
      </swiper-item>
      <swiper-item class="swiper-item">
        <alarmItem v-if="swiperCurrent === 1" style="width: 100%; height:100%" :form="form" :nameList="nameList">
        </alarmItem>
      </swiper-item>
    </swiper>

    <u-tabbar bg-color="#0d1a51" inactive-color="#666" active-color="#fff" height="60px" icon-size="30"
      mid-button-size="40" :list="barList" :mid-button="midButton"></u-tabbar>
  </view>
</template>

<script>
import alarmItem from './components/alarmItem.vue'
import earlyWarning from './components/earlyWarning.vue'

export default {
  name: 'index',
  components: { alarmItem, earlyWarning },
  data () {
    return {
      emitEvent: 'alarm',
      coalMineName: '',
      data: '',
      form: {
        show: false,
        disposalLevel: '',
        customerCode: '', //企业编码
        customerName: '', //企业名称
        sensorTypeName: '', // 传感器类型名称
        sensorType: '', // 传感器类型
        alarmType: '', // 报警类型
        alarmTypeName: '', //报警类型名称
        beginDate: '', //开始时间
        endDate: '' // 结束时间
      },
      list: [
        {
          name: '预警'
        },
        {
          name: '报警'
        }
      ],
      barList: [],
      nameList: [],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0 // swiper组件的current值，表示当前那个swiper-item是活动的
    }
  },
  methods: {
    // tabs通知swiper切换
    tabsChange (index) {
      this.swiperCurrent = index
      this.form = {
        show: false,
        disposalLevel: '',
        customerCode: '',
        customerName: '',
        sensorTypeName: '',
        sensorType: '',
        alarmType: '',
        alarmTypeName: '',
        beginDate: '',
        endDate: ''
      }
      const { app_selected_sensor_types, app_selected_alarm_types } = getApp().globalData.config
      if (index === 1) {
        this.$set(this.form, 'sensorType', app_selected_sensor_types)
        this.$set(this.form, 'alarmType', app_selected_alarm_types)
      }
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition (e) {
      const dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish (e) {
      const current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    clickBtn () {
      const url = '/pages/alarm/screen'
      let show = false // 预警
      if (this.swiperCurrent) {
        // 报警
        show = true
      }
      const form = {
        ...this.form,
        show
      }
      uni.navigateTo({
        url: `${url}?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`
      })
    },
    /**
     * 请求煤矿名称列表
     */
    getOptions () {
      this.nameList = getApp().globalData.coalList
    },
  },
  computed: {
    midButton () {
      return getApp().globalData.tabbarMidButton
    }
  },
  onLoad () {
    this.barList = getApp().globalData.list
    this.getOptions()

    uni.$on(this.emitEvent, res => {
      this.form = {
        ...res
      }
    })
  },
  onUnload () {
    // 清除监听
    uni.$off(this.emitEvent)
  }
}
</script>

<style lang="scss" scoped>
.home.bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #0d1a51;
  background: url('/static/image/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  .navbar-right {
    margin-right: 40rpx;

    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .swiper-div {
    display: flex;
    width: 100%;
    margin-bottom: 10rpx;
  }

  .form-title {
    background: #e5e5e5;
    line-height: 70rpx;
    text-indent: 10rpx;
    color: #666666;
  }
}
</style>
